import React,{Component} from 'react';
import { TabBar, Icon } from 'antd-mobile';
import {connect} from 'react-redux'
import {push} from 'react-router-redux'
import "./nav.css";

 class MainPage extends Component{
    render() {
        const {selectedTab,dispatch}=this.props;
        return (
            <div id="main">
                {this.props.children}
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                    barTintColor="white"
                    >
                    <TabBar.Item
                        title="首页"
                        key="首页"
                        icon={<div className="nav-icon home" />}
                        selectedIcon={<div className="nav-icon home-selected" />}
                        selected={selectedTab=== 'home'}
                        onPress={() =>{dispatch(push('/home/index'))}}
                        >
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<div className="nav-icon shop" />}
                        selectedIcon={<div className="nav-icon shop-selected" />}
                        title="彭州GO"
                        key="彭州GO"
                        badge={'new'}
                        selected={selectedTab=== 'go'}
                        onPress={() =>{dispatch(push('/home/go'))}}
                        >
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<div className="nav-icon pzq" />}
                        selectedIcon={<div className="nav-icon pzq-selected" />}
                        title="彭州圈"
                        key="彭州圈"
                        badge={'new'}
                        selected={selectedTab=== 'circle'}
                        onPress={() => {dispatch(push('/home/circle'))}}
                        >
                    </TabBar.Item>
                    <TabBar.Item
                        icon={<div className="nav-icon my" />}
                        selectedIcon={<div className="nav-icon my-selected" />}
                        title="我的"
                        key="我的"
                        selected={selectedTab=== 'personal'}
                        onPress={() => {dispatch(push('/home/personal'))}}
                        >
                    </TabBar.Item>
                </TabBar>
            </div>

        )
    }
}
function selectPathName(pathname){
    switch (pathname){
        case "/home/index":
            return "home";
        case "/home/go":
            return "go";
        case "/home/circle":
            return "circle";
        case "/home/personal":
            return "personal";
        default :
            return "home";
    }
}
function mapsStateToProps(state){
    return{
        selectedTab:selectPathName(state.routing.locationBeforeTransitions.pathname)
    }
}
export  default connect(mapsStateToProps)(MainPage)